<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import {
		addPatientApi,
		updatePatientApi,
		patientDetailApi,
	} from '@/services/patient.js'

	const form = ref({})
	const formData = ref({
		name: '测试',
		idCard: '110101197806108758',
		gender: 1,
		defaultFlag: 1,
		id: 0,
	})
	const sexs = [
		{
			text: '男',
			value: 1,
		},
		{
			text: '女',
			value: 0,
		},
	]
	const handleChange = (e) => {
		formData.value.defaultFlag = e.detail.value ? 1 : 0
	}
	const rules = {
		name: {
			rules: [
				{
					required: true,
					errorMessage: '请填写患者姓名',
				},
				{
					pattern: '^[\u4e00-\u9fa5]{2,5}$',
					errorMessage: '患者姓名为2-5位中文',
				},
			],
		},
		idCard: {
			rules: [
				{ required: true, errorMessage: '请输入身份证号' },
				{
					pattern:
						'^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
					errorMessage: '身份证号格式不正确',
				},
			],
		},
		gender: {
			rules: [
				{ required: true, errorMessage: '请勾选患者性别' },
				{
					validateFunction: function (rule, value, data, callback) {
						console.log(data.idCard.slice(16, 17) % 2, value)
						if (data.idCard.slice(16, 17) % 2 !== value) {
							callback('选择的性别与身份号中性别不一致')
						}
						return true
					},
				},
			],
		},
	}
	async function submit() {
		try {
			await form.value.validate()
			let res = null
			if (formData.value.id) {
				res = await updatePatientApi(formData.value)
			} else {
				res = await addPatientApi(formData.value)
			}

			if (res.code !== 10000) return uni.utils.toast(res.message)
			// 跳转到患者列表页面
			uni.navigateBack()
		} catch (err) {
			uni.utils.toast(err)
		}
	}
	const id = ref(0)
	onLoad((query) => {
		formData.value.id = query.id
		getPatientDetail()
	})
	async function getPatientDetail() {
		if (!formData.value.id) return
		uni.setNavigationBarTitle({
			title: '编辑患者',
		})
		const {
			data: { genderValue, age, ...rest },
		} = await patientDetailApi(formData.value.id)
		formData.value = rest
	}
</script>
<template>
	<scroll-page>
		<view class="archive-page">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="患者姓名" name="name">
					<uni-easyinput
						v-model="formData.name"
						placeholder="请输入真实姓名"
						:input-border="false"
						:clearable="false"
						:style="{ color: '#121826' }"
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者身份证号" name="idCard">
					<uni-easyinput
						:input-border="false"
						:clearable="false"
						v-model="formData.idCard"
						placeholder="请输入身份证号"
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者性别" name="gender">
					<uni-data-checkbox v-model="formData.gender" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="默认就诊人">
					<view class="uni-switch">
						<switch
							checked
							color="#20c6b2"
							style="transform: scale(0.7)"
							@change="handleChange"
						/>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="uni-button" @click="submit">保存</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	.archive-page {
		padding: 30rpx;
	}
	:deep(.uni-forms-item) {
		border-bottom: 1px solid #ededed;
		padding-top: 30rpx !important;
		padding-bottom: 20rpx !important;
	}
	:deep(.uni-forms-item__label) {
		font-size: 32rpx !important;
		color: #3c3e42 !important;
		width: 120px !important;
	}
	:deep(.uni-easyinput__content-input) {
		height: 36px;
	}
	:deep(.uni-data-checklist) {
		border-color: #20c6b2 !important;
		color: #20c6b2 !important;
	}
	:deep(.radio__inner) {
		transform: scale(1.25);
	}

	:deep(.checkbox__inner) {
		transform: scale(1.25);
	}
	:deep(.checklist-text) {
		font-size: 32rpx !important;
		margin-left: 20rpx !important;
	}
	:deep(.uni-forms-item__error) {
		color: red !important;
		font-size: 12px !important;
		line-height: 1 !important;
		position: absolute !important;
		top: 175% !important;
		left: -240rpx !important;
		right: 0 !important;
		border-top: 1px solid red;
		transition: transform 0.3s !important;
		transform: translateY(-100%) !important;
	}
	.uni-switch {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.uni-button {
		margin-top: 60rpx;
	}
</style>
